Skip to content

js-07 字符串、对象

一、字符串

查找 indexof

  1. 变量.charAt(n) 返回指定下标对应的字符,

    用中括号的形式使用比较多:变量[n]: IE7及以下不支持;

  2. s.indexOf(value,[,num]);

    • 一个参数:返回指定字符第一次出现的位置对应下标,没有时返回-1;

    • 两个参数:指定位置开始查找前面的字符,传入负数,默认为0;

      如果需要查找是否有敏感词,可以判断是否不等于-1

  3. s.lastindexOf("w"); 从后往左找,返回指定字符或字符串最后一次出现的位置;不影响下标,还是一样的,从左到右;

截取 slice

  1. slice([n],[m])

    js
    var str = 'abcdefg'
    str.slice() // => abcdefg    不填参数,返回全部;
    str.slice(1) // => bcdefg    只有n时,从n开始截取到结束
    str.slice(1, 3) // => bc      n,m时, 从n截取到m, 不包括m
    str.slice(2, 1) // => empty  n>m时, 返回空字符串
    str.slice(-1) // => g        负数从后面开始截取指定的负值数量
  2. substring([n],[m])

    与slice区别为:n>m自动转换下标,负数从0开始

    js
    var str = 'abcdefg'
    str.substring(3, 1) // => bc     n>m时, 自动转换下标
    str.substring(-1) // => abcdefg  负数从0开始
  3. substr(index,num)

    与前两个区别从下标截取多少个;

    js
    var str = 'abcdefg'
    str.substr(1, 3) // => bcd     n,m时, 从n截取m个
    str.substr(-1)  // => g        负数时, 从后面截取

分割 split

split(str,m)

以指定字符分割成数组,可以规定分割多少个,其余被省略;

  • 不填参数时:一个数组;

  • 一对引号:分割每个字符;

数组的方法:

字符串变数组:split();

数组变字符串:join();

替换 replace

变量.replace(被替换的字符,新字符)

如果需要多个可以:变量.replace().replace();

返回被替换的字符,只能替换一次;

比较 localeCompare

字符串是一位一位的比较,比如a="18",b="2",则b>a;

  • 如果字符串在字母表中应该排在字符串参数之前,返回负数

  • 如果相等,返回0

  • 如果在参数之后,返回正数;

js
var stringV = 'yellow'
stringV.localeCompare('brick') // 1
stringV.localeCompare('yellow') // 0
stringV.localeCompare('zoo') // -1

转换 Unicode码

将字符串转换成Unicode码:charCodeAt(传入下标)

将Unicode码转换成字符串:String.fromChartCode

js
var str = 'hello'
str.charCodeAt(0) // 104
str.charCodeAt(4) // 111
String.fromCharCode(104,101,108,108,111) // hello

大小写

  • toLowerCase();直接转变小写;

  • toUpperCase(); 转换成大写;

  • toLocaleLowerCase(); 本地转换小写;

  • toLocaleUpperCase(); 本地转换成大写;

trim

清除左右空格;

str.trim()

二、字符串扩展

  • includes(str) : 判断是否包含指定的字符串 true|false === indexOf

    也可以用于数组;仅适用于普通类型的数组,不包含对象的数组;

  • startsWith(str) : 判断是否以指定字符串开头

  • endsWith(str) : 判断是否以指定字符串结尾

  • repeat(count) : 重复指定次数 返回一个新的字符串

padStart、 padEnd

  1. 接收两个参数,第一个参数为最小长度,第二个参数为补全字符串;

    '1'.padStart(2,'0') //返回 '01'

    '1'.padEnd(2,'0') //返回 '10'

  2. 如果原字符串等于或大于指定的最小长度,则返回原字符串;

    '10'.padStart(2,'0') //返回 '10'

  3. 如果原字符串的长度小于补全字符串的长度,则截去超出位数的补全字符串;

    '09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"

    '09-12'.padEnd(10, 'YYYY-MM-DD') // "09-12YYYY-"

字符串的练习:

js
//网站常用
var str = '?user=18788889999&psd=abcdefgg123&code=Z4dCU4&message=';
var str = str.split("?")[1].split("&")     //先以?号拆再以&拆
var obj = {};  //声明一个对象 保留数据
for(var i=0;i<str.length;i++){
    var ss = str[i].split("=");
    if(ss[0] == "user" || ss[0] == "psd"){    //如果是user或psd就保留
        obj[ss[0]] = ss[1];
    }
}

将字符串倒过来:

js
var str = "Hello Word!"
str.split("").reverse().join('')

三、字符串的html方法

不建议使用这些方法,因为它们创建的标签通常无法表达语义;

  • big标签:big()
  • b标签:bold()
  • i标签:italics()
  • tt标签:fixed()
  • font color标签:fontcolor(color)
  • font size标签:fontsize(size)
  • a标签:link(url)
  • a name标签:anchor(name)
  • small标签:small()
  • strike标签:strike()
  • sub标签:sub()
  • sup标签:sup()
js
'wyy'.link('http://wyy.heny.vip') // <a href='http://wyy.heny.vip'>wyy</a>
'str'.fontcolor('red') // <font color='red'>str</font>

四、URI编码

  • encodeURI:主要是针对整体URI进行编码,不会对本身属于URI的特殊字符进行编码,例如冒号、正斜杠、问号和井字号;
  • encodeURIComponent:主要针对URI的某一段进行编码
  • decodeURI:对encodeURI进行解码
  • decodeURIComponent:对encodeURIComponent进行解码
js
var uri = 'http://www.wrox.com/illegal value.html#start'
encodeURI(uri) //http://www.wrox.com/illegal%20value.html#start
encodeURIComponent(uri) // http%3A%2F%2Fwww.wrox.com%2Fillegal%20value.html%23start

实践中常用encodeURIComponent

五、对象方法

原型对象

  1. Object.defineProperty(obj,attr,descriptor)

    修改或添加一个属性,通过defineProperty可以劫持一个对象的修改;

    每个对象值都有三个属性:configurable、writable、enumerable;

    如果直接用defineProperty创建的属性,将默认三个属性均为false,直接创建的对象三个属性默认为true

    js
    var person = {}
    Object.defineProperty(person, 'name', {
        configurable: false, // configurable只能设置一次,再次设置将报错
        writable: false,
        enumerable: false,
        value: 'hny'
    })
  2. Object.defineProperties(obj,props)

    添加或修改多个新属性;

    js
    var person = {}
    Object.defineProperties(person, {
        edition: {
            writable: true,
            value: 1
        },
        age: {
            writable: true,
            value: 18
        }
    })
  3. Object.getOwnPropertyDescriptor(obj, props)

    取得给定属性的描述符;

  4. obj.isPrototypeOf

    检测对象是否是另一个对象的原型

    js
    var obj = {name:'haha'}
    var obj2 = Object.create(obj)
    obj.isPrototypeOf(obj)
    
    // 构造函数使用原型去对比;
    Child.prototype.isPrototypeOf(obj)
  5. Object.getPrototypeOf()

    获取一个对象的原型;

  6. Object.setPrototypeOf(obj1,obj2)

    将obj2作为原型放到obj1身上,会直接修改obj1返回一个obj2;

  7. obj.hasOwnProperty()

    判断某个属性是否存在于某个对象当中,也可以使用in

    hasOwnProperty不会判断到原型去,

    in 操作符判断对象能否访问给定属性时返回true,否则返回false;

    判断一个对象是原型的属性:

    js
    function hasPrototypeProperty(obj, name) {
        // 不是实例身上的,in操作符判断能否获取到值;
        return !obj.hasOwnProperty(name) && name in obj
    }
  8. Object.create

    返回一个新对象,将传入的对象放到新对象的原型上,可以直接通过;

    js
    let obj = {name: 'hhh'}
    let obj2 = Object.create(obj)  // {}
    obj2.name  // hhh
  9. Object.getOwnpropertyNames()

    返回对象自身的全部属性名称;

其他方法

  1. Object.is(value1,value2)

    判断两个值是否相等,通过Object.is判断,两个NaN是相等的;

    js
    console.log(Object.is(NaN,Number('a')))  // true
  2. Object.assign(target,source.......)

    合并对象,返回一个新对象,将多个source对象组合到target对象身上;

  3. Object.keys

    以数组的形式返回对象所有的key值,通过遍历返回的数组,再次调用原来的对象,取得所有的value值;

    该方法不会返回不可枚举的属性;

    js
    var obj = {a:1,b:2,c:3,d:4}
    let objArr = Object.keys(obj).map(item=>({
        [item]:obj[item]
    }))
    // [{a:1},{b:2}....]
  4. Object.values

    以数组的形式返回对象所有的value值;

  5. Object.entries

    以二维数组的形式返回传入的对象,相当于es6里面的map对象;

  6. Object.fromEntries

    以对象的形式返回传入的二维数组对象;

  7. Object.freeze(obj)

    冻结一个对象,一个被冻结的对象不能被修改;(只是冻结值,引用不会被冻结)

    不能被修改是不能直接修改对象的基本类型的值,如果对象被重新赋值,还是可以被修改的;

    js
    var obj = {name: 'hhh'}
    Object.freeze(obj)
    obj.name = 'sss'
    console.log(obj) // {name: 'hhh'}
    
    obj = {name: 'sss'}
    obj.name = 'hny'
    console.log(obj) // {name: 'hny'}
  8. Object.isFrozen(obj)

    判断一个对象是否是冻结状态

高频面试题

● js 有哪些内置对象?

● 把下面的字符串去重,并去除掉特殊字符按照数字在前字母在后的顺序排序字符串

如下:“1233fddfd&3434fdsaff&454545&4545444rfdsfds&545gdsgs”

● 截取字符串“abcdefg”中的 def。

● 有这样一个 url:http://item.taobo.com/item.html?a=1&b=2&c=&d=xxx&e, 请写 一段 js 程序提取 url 中各个 get 参数 ( 参数名和参数个数不确定 ),将其 key-value 形式返回到一个 json 结构中,如

● 判断一个字符串中出现次数最多的字符,并且统计次数。

Released under the MIT License.